<template>
    <el-row class="all">
        <el-col :span="1">
            <el-scrollbar :class="{left:true,left_s:isCollapse}">
                <el-menu :default-active="n" class="el-menu-vertical-demo" :collapse="isCollapse" background-color=#344156 text-color="#c2cbd9">
                    <el-sub-menu index="1">
                        <template #title>
                            <i class="iconfont icon-dashboard"></i>
                            <span>首页</span>
                        </template>
                        <el-menu-item-group class="item-group">
                            <el-menu-item index="1-1" @click="changeto('ceping_x',['首页', '心理测评'])"><i class="iconfont icon-dashboard"></i>心理测评</el-menu-item>
                            <el-menu-item index="1-2" @click="changeto('dayi_x',['首页', '心理答疑'])"><i class="iconfont icon-dashboard"></i>心理答疑</el-menu-item>
                            <el-menu-item index="1-3" @click="changeto('zhishi_x',['首页', '心理知识'])"><i class="iconfont icon-dashboard"></i>心理知识</el-menu-item>
                            <el-menu-item index="1-4" @click="changeto('fm_x',['首页', 'FM'])"><i class="iconfont icon-dashboard"></i>FM</el-menu-item>
                            <el-menu-item index="1-5" @click="changeto('gongyi_x',['首页', '公益中心'])"><i class="iconfont icon-dashboard"></i>公益中心</el-menu-item>
                            <el-menu-item index="1-6" @click="changeto('jingxuan_x',['首页', '精选文章'])"><i class="iconfont icon-dashboard"></i>精选文章</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <i class="iconfont icon-dashboard"></i>
                            <span>咨询</span>
                        </template>
                        <el-menu-item-group class="item-group">
                            <el-menu-item index="2-1" @click="changeto('zixun_l',['咨询师', '咨询师管理'])"><i class="iconfont icon-dashboard"></i>咨询师管理</el-menu-item>
                            <el-menu-item index="2-2" @click="changeto('yuyue_l',['咨询师', '预约管理'])"><i class="iconfont icon-dashboard"></i>预约管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <i class="iconfont icon-dashboard"></i>
                            <span>课程</span>
                        </template>
                        <el-menu-item-group class="item-group">
                            <el-menu-item index="3-1" @click="changeto('lunbo_d',['课程', '轮播图'])"><i class="iconfont icon-dashboard"></i>轮播图</el-menu-item>
                            <el-menu-item index="3-2" @click="changeto('shizi_d',['课程', '师资团队'])"><i class="iconfont icon-dashboard"></i>师资团队</el-menu-item>
                            <el-menu-item index="3-3" @click="changeto('kecheng_d',['课程', '课程管理'])"><i class="iconfont icon-dashboard"></i>课程管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <i class="iconfont icon-dashboard"></i>
                            <span>我的</span>
                        </template>
                        <el-menu-item-group class="item-group">
                            <el-menu-item index="4-1" @click="changeto('yonghu_c',['我的', '用户管理'])"><i class="iconfont icon-dashboard"></i>用户管理</el-menu-item>
                            <el-menu-item index="4-2" @click="changeto('gonggao_c',['我的', '咨询公告'])"><i class="iconfont icon-dashboard"></i>咨询公告</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </el-scrollbar>
        </el-col>
        <el-col :span="20+ge" :push="3-ge" class="right">
            <el-row class="mianbao">
                <el-col :span="24" class="top">
                    <el-row class="top_c">
                        <el-col :span="1" class="top_co">
                            <el-button type="text" @click="change">
                                <i class="iconfont icon-shouqi" v-if="!isCollapse"></i>
                                <i class="iconfont icon-shouqi1" v-if="isCollapse"></i>
                            </el-button>
                        </el-col>
                        <el-col :span="6" class="top_co">
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item v-for="item,index in m" :key="index">
                                    <a href="/">{{ item }}</a>
                                </el-breadcrumb-item>
                            </el-breadcrumb>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="24">
                    <router-view></router-view>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<script setup>
    import { useRouter, useRoute } from "vue-router";
    import { computed, ref } from "vue";
    const isCollapse = ref(false);

    let ge = computed(() => {
        if (isCollapse.value) {
            return 3;
        }
        return 0;
    });

    const route = useRoute();
    let n = ref(route.meta.index);
    let m = ref(route.meta.name);
    const router = useRouter();
    const changeto = function (data, dizhi) {
        router.replace({ name: data });
        m.value = dizhi;
    };

    const change = function () {
        isCollapse.value = !isCollapse.value;
    };
</script>

<style lang="less" scoped>
    .all {
        .left {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            transition: all 0.4s;
            background-color: #344156;
            width: 16.67%;

            i {
                font-size: 12px;
                margin-right: 20px;
            }

            .item-group {
                background-color: #232d3d;
            }

            /deep/ .el-menu-item-group__title {
                padding: 0 !important;
            }
        }

        .left_s {
            width: 4.16%;
        }

        .right {
            transition: all 0.4s;
            .mianbao {
                .top {
                    padding: 10px;
                    border-bottom: 1px solid #ccc;
                    margin-bottom: 20px;
                    .top_c {
                        display: flex;
                        align-items: center;
                        .top_co {
                            display: flex;
                            justify-content: start;
                            i {
                                color: black;
                            }
                        }
                    }
                }
            }
        }

        /deep/ .el-dialog__header {
            display: flex !important;
            justify-content: start !important;
        }
    }
</style>